<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-20 14:08:37
 * @LastEditTime: 2019-10-09 15:53:56
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="list" />  添加用户
      </div>
      <div class="container_body">
        <el-form
          ref="addform"
          :model="addform"
          :rules="addRules"
          label-width="150px"
          class="demo-dynamic"
        >
          <el-form-item
            label="用户名称"
            prop="username"
          >
            <el-input
              ref="username"
              v-model="addform.username"
              placeholder="用户名称"
              name="username"
            />
          </el-form-item>
          <el-form-item
            v-if="!addform.id"
            label="密码"
            prop="password"
          >
            <el-input
              ref="password"
              v-model="addform.password"
              placeholder="密码"
              name="password"
              show-password
            />
          </el-form-item>
          <el-form-item
            v-if="!addform.id"
            label="确认密码"
            prop="enter_password"
          >
            <el-input
              ref="enter_password"
              v-model="addform.enter_password"
              placeholder="请再次输入密码"
              name="enter_password"
              show-password
            />
          </el-form-item>
          <el-form-item
            label="选择角色"
            prop="role"
          >
            <template>
              <el-select v-model="addform.role" placeholder="请选择">
                <el-option
                  v-for="item in role_list"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </template>
          </el-form-item>
          <el-form-item
            label="邮箱地址"
            prop="email"
          >
            <el-input ref="email" v-model="addform.email" placeholder="邮箱地址" />
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="phone"
          >
            <el-input ref="phone" v-model="addform.phone" placeholder="手机号" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="btn" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import config from '../../config/config'
export default {
  data() {
    const enterValidator = (rule, value, callback) => {
      if (this.addform.password !== this.addform.enter_password) {
        callback(new Error('两次输入的密码不相同！'))
      }
      callback()
    }
    const roleValidate = (rule, value, callback) => {
      if (this.addform.role === '' || this.addform.role === null || this.addform.role === undefined) {
        callback(new Error('请选择一个角色！'))
      }
      callback()
    }
    const emailValidate = (rule, value, callback) => {
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
      var re = new RegExp(reg)
      if (!re.test(this.addform.email)) {
        callback(new Error('邮箱格式不正确！'))
      }
      callback()
    }
    const phoneValidate = (rule, value, callback) => {
      const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
      var re = new RegExp(reg)
      if (!re.test(this.addform.phone)) {
        callback(new Error('请填写正确的手机号'))
      }
      callback()
    }
    const passwordValidate = (rule, value, callback) => {
      if (this.addform.password === '' || this.addform.password === undefined || this.addform.password === null) {
        callback(new Error('请输入密码！'))
      } else {
        if (this.addform.password.length < 8) {
          callback(new Error('密码不得小于八位！'))
        }
      }
      callback()
    }
    return {
      addform: {
        domains: [{
          value: ''
        }]
      },
      addRules: {
        username: [{ required: true, trigger: 'blur', message: '请填写用户名' }],
        email: [{ required: true, validator: emailValidate }],
        phone: [{ required: true, validator: phoneValidate }],
        password: [{ required: true, validator: passwordValidate }],
        role: [{ required: true, validator: roleValidate }],
        enter_password: [{ required: true, validator: enterValidator }]
      },
      label_list: [],
      role_list: [],
      img_path: config.BASE_IMG,
      checkboxGroup: []
    }
  },
  created() {
    this.$api.role_list([]).then(res => {
      this.role_list = res.data
    })
    var id = this.$route.query.id
    if (id) {
      const data = {
        id: id
      }
      this.$api.get_user_info(data).then(res => {
        console.log(res)
        this.addform = res.data
      })
    }
  },
  methods: {
    submitForm() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          this.addform.platform = this.checkboxGroup.join(',')
          this.$api.add_users(this.addform).then(res => {
            this.$notify.success({
              message: '添加成功！'
            })
            this.$router.push('/users-index')
          }).catch(() => {
            this.$notify.error({
              title: '',
              message: '网络错误'
            })
          })
        }
      })
    },
    resetForm() {
      this.$refs.addform.resetFields()
      this.addform = {
        domains: [{
          value: ''
        }]
      }
      this.label_list = []
      this.checkboxGroup = []
    }
  }
}
</script>
<style scoped lang="">

</style>
